<template>
    <div class="container">
        <div class="heade">
            <!--查询表头 -->
            <div class="header">
                <span class="text">筛选查询</span>
                <button type="success" class="info" @click="queryByInput">查询结果</button>
                <!--查询结果表，隐藏-->
                <el-dialog title="查询结果" :visible.sync="dialogVisible" width="100%">
                    <el-table :data="searchResults" style="width: 100%">
                        <el-table-column label="编号" width="60">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column label="创建日期" width="160">
                            <template slot-scope="scope">{{ scope.row.createTime | dateFormat }}</template>
                        </el-table-column>
                        <el-table-column prop="vendorName" label="供货厂商"></el-table-column>
                        <el-table-column prop="warehouseId" label="进货仓库"></el-table-column>
                        <el-table-column prop="total" label="总金额"></el-table-column>
                        <el-table-column label="需用日期" width="160">
                            <template slot-scope="scope">{{ scope.row.endTime | dateFormat }}</template>
                        </el-table-column>
                        <el-table-column prop="employee1Name" label="发起人"></el-table-column>
                        <el-table-column prop="employee2Name" label="审批人"></el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status === 0" style="color: #666666">待审批</span>
                                <span v-else-if="scope.row.status === 1" style="color: #FFCC00">已通过</span>
                                <span v-else-if="scope.row.status === 2" style="color: #3399FF">已入库</span>
                                <span v-else-if="scope.row.status === 3" style="color: #FF0000">未通过</span>
                            </template>
                        </el-table-column>
                        <el-table-colum prop="status" label="审批操作">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status === 0" style="color: #1ABC9C;cursor: pointer;">审批</span>
                                <span v-else-if="scope.row.status === 1" style="color: #1ABC9C;cursor: pointer;">入库</span>
                                <span v-else-if="scope.row.status === 2" style="color: #1ABC9C"></span>
                                <span v-else-if="scope.row.status === 3" style="color: #1ABC9C;cursor: pointer;">审批</span>
                            </template>
                        </el-table-colum>
                    </el-table>
                </el-dialog>
            </div>
            <!-- 查询条件输入部分-->
            <div class="heade-text">
                <el-form ref="form" :model="form" label-width="80px" class="heade-form">
                    <el-form-item label="入库日期">
                        <el-date-picker
                        v-model="endTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="供货厂商">
                        <!--<el-input v-model="form.vendorName" style="width: 160px;"></el-input> -->
                        <el-autocomplete
                            v-model="inputValue"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入关键词"
                            @select="handleSelect"
                        ></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="进货仓库">
                        <el-select v-model="form.warehouse" placeholder="请选择仓库" style="width: 200px;">
                            <el-option label="A仓库" value="A仓库"></el-option>
                            <el-option label="大大" value="大大"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="大苏打" value="大苏打"></el-option>
                            <el-option label="撒大苏打" value="撒大苏打"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="采购状态">
                        <el-select v-model="form.status" placeholder="请选择活动区域" style="width: 200px;">
                            <el-option label="待审批" value=0></el-option>
                            <el-option label="不通过" value=3></el-option>
                            <el-option label="已通过" value=1></el-option>
                            <el-option label="已入库" value=2></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 列表内容展示部分-->
        <div class="between">
            <div class="header" router>
                <span class="text">数据列表</span>
                <button type="success" class="info1"><router-link to="/procure/ProcureApply" style="text-decoration: none;color:#000">添加</router-link></button>
                <button type="success" class="info">导出</button>
            </div>
            <div class="between-table">
                <el-table
                    :header-cell-style="{fontSize: '14px',textAlign: 'center'}" 
                    :cell-style="{fontSize: '12px',textAlign: 'center'}"
                    ref="multipleTable"
                    :data="tableList"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="编号" width="60">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column label="创建日期" width="160"><template slot-scope="scope">{{ scope.row.createTime | dateFormat }}</template></el-table-column>
                    <el-table-column prop="vendorName" label="供货厂商"></el-table-column>
                    <el-table-column prop="warehouseId" label="进货仓库"></el-table-column>
                    <el-table-column prop="total" label="总金额"></el-table-column>
                    <el-table-column  label="入库时间" width="160">
                        <template slot-scope="scope">{{ scope.row.endTime | dateFormat }}</template>
                    </el-table-column>
                    <el-table-column prop="employee1Name" label="发起人"></el-table-column>
                    <el-table-column prop="employee2Name" label="审批人"></el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status === 0" style="color: #666666">待审批</span>
                            <span v-else-if="scope.row.status === 1" style="color: #FFCC00">已通过</span>
                            <span v-else-if="scope.row.status === 2" style="color: #3399FF">已入库</span>
                            <span v-else-if="scope.row.status === 3" style="color: #FF0000">未通过</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="审批操作">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status === 0" style="color: #1ABC9C;cursor: pointer;" @click="showConfirmDialog(scope.row.id,scope.row.status)">审批</span>
                            <span v-else-if="scope.row.status === 1" style="color: #1ABC9C;cursor: pointer;" @click="showConfirmDialog(scope.row.id,scope.row.status)">入库</span>
                            <span v-else-if="scope.row.status === 2" style="color: #1ABC9C"></span>
                            <span v-else-if="scope.row.status === 3" style="color: #1ABC9C;cursor: pointer;" @click="showConfirmDialog(scope.row.id,scope.row.status)">审批</span>
                            <el-dialog title="确认选项" :visible.sync="dialogVisible2">
                                <span>请选择：</span>
                                <el-button @click="handleAgree">同意</el-button>
                                <el-button @click="handleDisagree">不同意</el-button>
                            </el-dialog>
                        </template>
                    </el-table-column>
                    <el-table-column prop="option" label="操作">
                        <template slot-scope="scope">
                            <router-link :to="{path:'/stock/AddWareHousing', query: {data: scope.row}}" class="column">编辑</router-link>
                            <router-link :to="{path:'/stock/AddWareHousing', query: {data: scope.row}}" class="column">预览</router-link>
                            <button class="column" @click="del(scope.row.id)">删除</button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px; display: flex; ">
                    <el-button @click="toggleSelection()">取消选择</el-button>
                    <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="totalItems">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    created(){
       //页面一加载，调用方法
       this.quireData();
       this.totalItems=this.tableData.length;
    },
    data() {
      return {
        endTime: [],
        delete:{id:null},
        inputValue: '', // 输入框的值
        suggestions: [], // 查询结果列表
        currentPage: 1, // 当前页码
        pageSize: 8, // 每页显示的条数
        totalItems: 0, // 总条数，根据实际情况进行设置
        dialogVisible: false,
        dialogVisible2: false,
        searchResults: [],
        tableList: [],
        updatestatus:{
            id: "0",
            status: "0",
        },
        form: {
          date1: '',
          date2: '',
          vendorName:'',
          warehouse:'',
          status:'',
        },
        tableData: [
            {id: 1,createTime:'2022-12-3',vendorName:'A厂商',total: 999,status: 3},
            {id: 2,createTime:'2022-12-3',vendorName:'A厂商',total: 999,status: 2},
            {id: 3,createTime:'2022-12-3',vendorName:'A厂商',total: 999,status: 1},
            {id: 4,createTime:'2022-12-3',vendorName:'A厂商',total: 999,status: 0},
            {id: 5,createTime:'2022-12-3',vendorName:'A厂商',total: 999,status: 0},
            {id: 6,createTime:'2022-12-3',vendorName:'A厂商',total: 999,status: 0},
        ],
        multipleSelection: [],
      }
    },   
    mounted() {
        this.getData();
        this.mockData = [
        { value: '娃哈哈' },
        { value: '康师傅' },
        { value: '统一' },
        { value: '娃哈哈厂商' },
        { value: '中沃' },
        { value: '百岁山' },
        { value: '蓝关' },
        { value: '华为' },
        { value: '小米' },
        { value: '苹果' }
        ];
    },
     methods: {
      toggleSelection(rows) {
        this.$refs.multipleTable.clearSelection();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
        //    访问后端接口，实现所有数据查询
      async quireData(){
        //    访问后端接口，实现查询
          const {data:resp} = await this.$http.get("/Receipt/searchreceiptall");
          this.tableData = resp.data
          if(resp.code == 0){
            this.tableData = resp.data;
            this.totalItems=this.tableData.length;
            this.getData();
          }else{
            this.$message.error(resp.message);
          }  
        },
        //根据用户输入进行查询
        async queryByInput(){
            this.form.date1=this.filterTime(this.endTime[0]);
            this.form.date2=this.filterTime(this.endTime[1]);
            const {data:res} = await this.$http.get("/Receipt/searchreceiptBys",{
                params:{
                    begindata:this.form.date1,
                    enddata:this.form.date2,
                    vendorName:this.form.vendorName,
                    status:this.form.status
                }
            });
            this.dialogVisible = true;
            this.searchResults = [
                // {id: 1,createTime:'2022-12-3',vendorName:'A厂商',total: 999,status: 3}
            ];
            console.log(res.data);
            this.searchResults=res.data;
            console.log("我是日期",this.form.date1,this.filterTime(this.date[0]));
            console.log("我是日期",this.form.date2);
            console.log("我是日期",this.form);
       },
       //修改状态
       async wareHousing(id, status){
        //    访问后端接口，实现修改状态
        // console.log("asdasdadad"+id);
        const {data:res} = await this.$http.get("/Receipt/updateStatus",{params:{id:id,status:status}});
        this.$message.success("操作成功");
        this.quireData();
       },
       //显示审批操作
       showConfirmDialog(id,status) {
            this.dialogVisible2 = true;
            this.updatestatus.id=id.toString();
            this.updatestatus.status=status.toString();
            // console.log(this.updatestatus.id,this.updatestatus.status);
       },
       // 同意逻辑改变状态
       handleAgree() {
            this.dialogVisible2 = false;
            if(this.updatestatus.status==="1"){
                this.updatestatus.status="2";
            }
            else{
                this.updatestatus.status="1";
            }
            // console.log(this.updatestatus.id,this.updatestatus.status);
            this.wareHousing(this.updatestatus.id,this.updatestatus.status);
       },
       //不同意，不做变更
       handleDisagree() {
            this.dialogVisible2 = false;
            this.updatestatus.status="3";
            this.wareHousing();
       },
       //删除
        async del(id){
            this.delete.id=id;
            console.log(id);
            const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).catch(err => err);
            //用户确认删除，返回字符串 confirm
            //用户取消删除，返回字符串 cancel
            if(confirmResult != 'confirm'){
                this.$message.info("已取消删除");
            }else{
            //确认删除
                const {data:res} = await this.$http.post("/Receipt/deletereceipt",this.delete);
                console.log("我是ID",id);
              //重新获取用户列表
               this.quireData();
               this.$message.success("删除用户成功");
           }
        },
        //实施分页
        getData() {
            this.tableList=[]
            //第一步：当前页的第一条数据在总数据中的位置
            let strlength = (this.currentPage - 1) * this.pageSize + 1;
            //第二步：当前页的最后一条数据在总数据中的位置
            let endlength = this.currentPage * this.pageSize;
            //第三步：此判断很重要，执行时机：当分页的页数在最后一页时，进行重新筛选获取数据时
            //获取本次表格最后一页第一条数据所在的位置的长度
            let resStrLength=0
            if(this.tableData.length % this.pageSize == 0){
                resStrLength = (parseInt(this.tableData.length / this.pageSize)-1) * this.pageSize + 1
            }else{
                resStrLength = parseInt(this.tableData.length / this.pageSize) * this.pageSize + 1
            }
            //如果上一次表格的最后一页第一条数据所在的位置的长度 大于 本次表格最后一页第一条数据所在的位置的长度，则将本次表格的最后一页第一条数据所在的位置的长度 为最后长度
            if(strlength>resStrLength){
                strlength=resStrLength
            }
            //第四步：此判断很重要，当分页的页数切换至最后一页，如果最后一页获取到的数据长度不足最后一页设置的长度，则将设置的长度 以 获取到的数据长度 为最后长度
            if (endlength > this.tableData.length) {
                endlength = this.tableData.length;
            }
            //第五步：循环获取当前页数的数据，放入展示的数组中
            for (let i = strlength - 1; i < endlength; i++) {
                this.tableList.push(this.tableData[i]);
                console.log("当前数据",this.tableData[i]);
            }
        //数据的总条数
            this.totalItems = this.tableData.length;
        },
        //切换页数，执行方法
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage=val
            this.getData()  
        },

        querySearch(queryString, cb) {
        // 模拟异步查询
            setTimeout(() => {
                // 根据输入的值进行模糊查询，并将结果传递给回调函数
                const results = this.mockData.filter(item =>
                item.value.toLowerCase().includes(queryString.toLowerCase())
                );
                cb(results);
            }, 200);
        },
        handleSelect(item) {
        // 处理选中结果的逻辑
            this.form.vendorName=item.value;
        },
        //时间转换
        filterTime(time) {
            var date = new Date(time);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            var h = date.getHours();
            h = h < 10 ? "0" + h : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? "0" + minute : minute;
            var s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
        },
    }
}

</script>

<style scoped>
.column{
    text-decoration: none;
    color: #1ABC9C;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}
.heade-text{
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
}
.heade-form{
    display:flex;
    position: relative;
    top: 12px;
}
.text{
    font-size: 14px;
    position: absolute;
    left: 12px;
}
.info1{
    font-size: 14px;
    position: absolute;
    right: 70px;
    top: 14px;
}
.info{
    font-size: 14px;
    position: absolute;
    right: 12px;
    top: 14px;
}
.header{
    position: relative;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(243, 243, 243, 1);
    border: 1px solid rgba(228, 228, 228, 1);
}
.between .header{
    margin-top: 20px;
}
.column{
    font-size: 12px;
    margin-right: 5px;
}
</style>